<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :topHeight="'10vh'"
    :dialogWidth="'55%'"
  >
    <div class="innerloding">
      <div class="classformarea">
        <div class="title-head">
          <div class="title">标题</div>
        </div>
        <el-form
          ref="classForm"
          :model="formData"
          :label-position="'right'"
          :rules="rules"
          size="medium"
        >
          <el-row>
            <el-col :span="24">

                <el-form-item label="" prop="title">
                  <el-input
                    v-model="formData.title"
                    placeholder="请输入标题"
                    clearable
                  ></el-input>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="title-head">
          <div class="title">内容</div>
        </div>
        <el-table :data="tabledatas" border style="width: 100%">
          <el-table-column label="内容" align="center">
            <template slot-scope="scope">
              <span>
                <el-input
                  size="mini"
                  placeholder="请输入内容"
                  v-model="scope.row.content"
                ></el-input>
              </span>
              <!-- <span v-else>{{ scope.row.text }}</span> -->
            </template>
          </el-table-column>
           <el-table-column label="标题" align="center" width="85">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.isTitle"
                clearable
                size="mini"
                :style="{ width: '97%' }"
              >
                <el-option
                  v-for="(item, index) in tiileOption"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="小标题" align="center" width="85">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.isLittleTitle"
                clearable
                size="mini"
                :style="{ width: '97%' }"
              >
                <el-option
                  v-for="(item, index) in istiileOption"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
         
           <el-table-column label="加粗" align="center" width="85">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fontWeight"
                clearable
                size="mini"
                :style="{ width: '97%' }"
              >
                <el-option
                  v-for="(item, index) in isfontWeightOption"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
           <el-table-column label="颜色" align="center" width="85">
            <template slot-scope="scope">
              <el-color-picker v-model="scope.row.color"></el-color-picker>
            </template>
          </el-table-column>
          <el-table-column
            label=""
            width="110"
            align="center"
            :render-header="renderHeader"
          >
            <template slot-scope="scope">
              <el-link
                @click="delect(scope.$index)"
                :underline="false"
                type="primary"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'

//获取本地数据
import { getSessionStorage } from '@/utils/accessToken'
import { helpcenterCreate,helpcenterUpdate } from '@/api/help'
export default {
  data() {
    return {
      //上传8张图片
      tabledatas: [],
      formData: {
        title:''
      },
      rules: {},
      //descData
      istiileOption:[{
        title:'是',id:'1'
      },{
        title:'否',id:'0'
      }],
      tiileOption:[{
        title:'是',id:'1'
      },{
        title:'否',id:'0'
      }],
      isfontWeightOption:[{
        title:'是',id:'bold'
      },{
        title:'否',id:'normal'
      }],
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    //是编辑还是新增
    dialogData: {
      type: Object,
      default:()=>{
        return {}
      }
    },
  },
  methods: {

    //关闭弹窗
    closeDialog() {
      this.$refs['classForm'].resetFields()
      this.tabledatas=[]
      this.$emit('closedialog')
    },
    renderHeader(h) {
      return (
        <div>
          <el-button type="primary" onClick={this.addAll} class="addbtn">
            新增
          </el-button>
        </div>
      )
    },
    // 单个删除
    delect(index) {
      this.tabledatas.splice(index, 1)
    },
    //批量新增
    addAll() {
      let list = {
        //   show: true,
        content: '',
        isTitle: '0',
        isLittleTitle: '0',
        fontWeight: 'normal',
        color: '#666666',
      }
      this.tabledatas.push(list)
    },
    //点击确认提交表单
    confirmbtn() {
      this.$refs['classForm'].validate(async (valid) => {
        if (!valid) return
        let params = {}
        params.title=this.formData.title
        params.detail=JSON.stringify(this.tabledatas)
        if (this.formType == 0) {
          let data = await helpcenterCreate(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: data.msg,
            })
            //关闭弹窗
            this.$refs['classForm'].resetFields()
            this.$emit('confirm')
          }
        } else {
          params.id=this.dialogData.id
           let data = await helpcenterUpdate(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: data.msg,
            })
            //关闭弹窗
            this.$refs['classForm'].resetFields()
            this.$emit('confirm')
            
          }
        }
      })
    },
  },
  mounted() {},
  watch: {
    dialogData:function(val){
      console.log(val,'-------------------')
      if(this.formType==1){
        this.formData.title=val.title;
        this.tabledatas=JSON.parse(val.detail)
      }else{
        this.formData.title=''
      }
    }
  },
  destroyed() {
   this.$refs['classForm'].resetFields()
   this.tabledatas=[]
  },
}
</script>

<style scoped lang='scss'>
::v-deep{
  .el-color-picker__color{
    border: none;
  }
  .el-color-picker__trigger{
        border: none;
  }
}
.imgDetail {
  width: 100%;
  min-height: 116px;
  max-height: 400px;
  overflow-y: scroll;
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 12px 16px 8px;
  box-sizing: border-box;
  .imgDetail-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 14px;
      line-height: 24px;
      color: #666;
    }
  }
}
.uploaditem {
  position: absolute;
  left: 0;
  top: 0;
}

.tablearea {
  margin-bottom: 20px;
}
::v-deep {
  .uploadimg {
    width: 100%;
    .el-form-item__content {
      width: 100%;
    }
  }
  .el-tabs__header {
    position: absolute;
    width: calc(100% - 40px);
    z-index: 999;
    // height: 60px;
    box-sizing: border-box;
    top: 55px;
    padding: 18px 0 0 0;
    background-color: #ffffff;
    box-shadow: 0 8px 28px 0 rgba(192, 206, 226, 0.13);
  }
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
  }
  .el-form-item__label {
    position: relative;
    right: 5px;
  }
  .el-form {
    padding-right: 0px !important;
  }

  .el-dialog__body {
    // overflow: hidden;
    // height: 550px !important;
    max-height: calc(70vh - 124px);
    overflow: auto;
  }
  .el-input-group__append {
    color: #999 !important;
  }
}
.tiptext {
  font-size: 12px;
  color: red;
  float: right;
  margin: 15px 0;
}
.bxitem {
  margin-bottom: 20px;
}

.bxjsinfo {
  margin-top: 60px;
  width: 100%;
}
.title-head {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
  &::before {
    content: '';
    display: block;
    width: 3px;
    height: 20px;
    background-color: #4c68ef;
    margin-right: 10px;
  }
}
</style>
